import React, { ReactNode, useRef, useState } from "react";
import classNames from "classnames";
import Icon from "../Icon/Icon";
import useClickOutside from "../../hooks/useClickOutside";
import NoData from "../NoData/NoData";
type SelectMode = "multiple" | "tags";
// export enum SelectSize {
//   Small = "sm",
//   Middle = "mid",
//   Large = "lg",
// }
type OptionObj = {
  label: string;
  value: string;
};
export interface SelectProps {
  options?: OptionObj[];
  value?: string[];
  defaultValue?: string;
  mode?: SelectMode;
  className?: string;
  maxCount?: number;
  disabled?: boolean;
  onChange?: (value?: OptionObj) => void;
  optionRender?: (value?: OptionObj) => ReactNode;
  onSelect?: (value?: OptionObj) => void;
  open?: boolean;
}
const Select = (props: SelectProps) => {
  const {
    options = [],
    value = [],
    mode,
    maxCount = 5,
    disabled,
    onChange,
    optionRender,
    onSelect,
    className,
    open = false,
  } = props;
  const [show, setShow] = useState(open);
  const [refresh, setRefresh] = useState(false);
  let [currentValue, setCurrentValue] = useState(value);

  const componentRef = useRef<HTMLDivElement>(null);
  const selectDownRef = useRef<HTMLDivElement>(null);
  useClickOutside(componentRef, (_e: any) => {
    if (
      !selectDownRef.current ||
      selectDownRef.current.contains(_e.target as HTMLElement)
    ) {
      if (!mode) {
        setShow(false);
      }
    } else {
      setShow(false);
    }
  });

  const classes_box = classNames("coerger-select-bigBox", className, {
    "select-disable-cursor": !!disabled,
  });

  const classes = classNames("coerger-select", className, {
    "select-disable-event": !!disabled,
  });
  const handleClick = () => {
    setShow(true);
  };
  const handleSelect = (value: OptionObj) => {
    if (currentValue.indexOf(value.value) === -1 && onChange) {
      onChange(value);
    }
    if (onSelect) {
      onSelect(value);
    }

    if (mode) {
      if (currentValue.indexOf(value.value) === -1) {
        if (currentValue.length < maxCount) {
          currentValue.push(value.value);
        }
      } else {
        removeTag(value.value);
      }
    } else {
      setCurrentValue([value.value]);
    }
    // console.log("currentValue", currentValue);

    setRefresh(!refresh);
  };

  const renderTags = () => {
    if (!currentValue.length) {
      return;
    }

    return currentValue.map((value, index) => (
      <div key={value} className="select-Tag">
        {value}
        <span className="coerger-select-icon">
          <Icon
            icon={"times"}
            onClick={(e) => {
              removeTag(value as string, e);
            }}
          ></Icon>
        </span>
      </div>
    ));
  };
  const removeTag = (value: string, e?: React.MouseEvent) => {
    e?.stopPropagation();
    currentValue.splice(currentValue.indexOf(value), 1);
    setRefresh(!refresh);
    // console.log("removeTag", value, arr);
    // console.log("currentValue", currentValue);
  };

  const renderSelectItem = () => {
    return options.map((value, index) => {
      const classes = classNames("coerger-select-li", {
        "coerger-select-li-active": currentValue.indexOf(value.value) !== -1,
      });
      return (
        <li
          key={index}
          className={classes}
          onClick={() => {
            handleSelect(value);
          }}
        >
          {!!optionRender ? optionRender(value) : value.label}
        </li>
      );
    });
  };
  return (
    <div className={classes_box}>
      <div className={classes} onClick={handleClick} ref={componentRef}>
        <div className="coerger-select-show">
          {mode === "tags" ? renderTags() : currentValue.toString()}
        </div>
        <span className="coerger-select-icon">
          <Icon icon={"angle-down"}></Icon>
        </span>
      </div>
      {show && (
        <div className="coerger-select-downBox" ref={selectDownRef}>
          {options.length === 0 ? (
            <NoData></NoData>
          ) : (
            <ul className="coerger-select-ul">{renderSelectItem()}</ul>
          )}
        </div>
      )}
    </div>
  );
};

export default Select;
